import { ColorItem, ColorPalette, Meta, Title } from '@storybook/addon-docs/blocks'

<Meta title="theme/Colors" />

<Title>Dark</Title>

<ColorPalette>
  <ColorItem
    title="Accent Primary"
    subtitle="010 | 020 | 030"
    colors={{
      'accent-010': 'rgba(9, 136, 240, 0.1)',
      'accent-020': 'rgba(9, 136, 240, 0.2)',
      'accent-030': 'rgba(9, 136, 240, 0.3)'
    }}
  />
  <ColorItem
    title="Accent Primary"
    subtitle="080 | 090 | 100"
    colors={{
      'accent-080': 'rgba(9, 136, 240, 0.8)',
      'accent-090': 'rgba(9, 136, 240, 0.9)',
      'accent-100': 'rgba(9, 136, 240, 1.0)'
    }}
  />
  <ColorItem
    title="Accent Secondary"
    subtitle="080 | 090 | 100"
    colors={{
      'accent-secondary-080': 'rgba(199, 185, 148, 0.8)',
      'accent-secondary-090': 'rgba(199, 185, 148, 0.9)',
      'accent-secondary-100': 'rgba(199, 185, 148, 1.0)'
    }}
  />
  <ColorItem
    title="Text"
    subtitle="Primary | Secondary | Tertiary"
    colors={{
      'text-primary': '#FFFFFF',
      'text-secondary': '#9A9A9A',
      'text-tertiary': '#BBBBBB'
    }}
  />
  <ColorItem
    title="Background"
    subtitle="Primary | Secondary | Tertiary"
    colors={{
      'background-primary': '#202020',
      'foreground-primary': '#252525',
      'foreground-secondary': '#2A2A2A',
      'foreground-tertiary': '#363636'
    }}
  />
  <ColorItem
    title="Neutrals"
    subtitle="500 | 600 | 700"
    colors={{
      'neutrals-500': '#9A9A9A',
      'neutrals-600': '#6C6C6C',
      'neutrals-700': '#4F4F4F'
    }}
  />
  <ColorItem
    title="Neutrals"
    subtitle="800 | 900 | 1000"
    colors={{
      'neutrals-800': '#363636',
      'neutrals-900': '#2A2A2A',
      'neutrals-1000': '#252525'
    }}
  />
  <ColorItem
    title="Borders"
    subtitle="Primary | Secondary"
    colors={{
      'border-primary': '#2A2A2A',
      'border-secondary': '#4F4F4F'
    }}
  />
  <ColorItem
    title="Semantic Success"
    subtitle="010 | 080 | 100"
    colors={{
      'semantic-success-010': 'rgba(48, 164, 107, 0.1)',
      'semantic-success-080': 'rgba(48, 164, 107, 0.8)',
      'semantic-success-100': 'rgba(48, 164, 107, 1.0)'
    }}
  />
  <ColorItem
    title="Semantic Error"
    subtitle="010 | 080 | 100"
    colors={{
      'semantic-error-010': 'rgba(223, 74, 52, 0.1)',
      'semantic-error-080': 'rgba(223, 74, 52, 0.8)',
      'semantic-error-100': 'rgba(223, 74, 52, 1.0)'
    }}
  />
  <ColorItem
    title="Semantic Warning"
    subtitle="010 | 080 | 100"
    colors={{
      'semantic-warning-010': 'rgba(243, 161, 63, 0.1)',
      'semantic-warning-080': 'rgba(243, 161, 63, 0.8)',
      'semantic-warning-100': 'rgba(243, 161, 63, 1.0)'
    }}
  />
  <ColorItem
    title="Product Colors"
    subtitle="WalletKit | AppKit | Cloud"
    colors={{
      'product-walletkit': '#FFB800',
      'product-appkit': '#FF573B',
      'product-cloud': '#0988F0'
    }}
  />
  <ColorItem
    title="Base Colors"
    subtitle="Black | White | White010"
    colors={{
      black: '#202020',
      white: '#FFFFFF',
      'white-010': 'rgba(255, 255, 255, 0.1)'
    }}
  />
</ColorPalette>

<Title>Light</Title>

<ColorPalette>
  <ColorItem
    title="Accent Primary"
    subtitle="010 | 020 | 030"
    colors={{
      'accent-010': 'rgba(9, 136, 240, 0.1)',
      'accent-020': 'rgba(9, 136, 240, 0.2)',
      'accent-030': 'rgba(9, 136, 240, 0.3)'
    }}
  />
  <ColorItem
    title="Accent Primary"
    subtitle="080 | 090 | 100"
    colors={{
      'accent-080': 'rgba(9, 136, 240, 0.8)',
      'accent-090': 'rgba(9, 136, 240, 0.9)',
      'accent-100': 'rgba(9, 136, 240, 1.0)'
    }}
  />
  <ColorItem
    title="Accent Secondary"
    subtitle="080 | 090 | 100"
    colors={{
      'accent-secondary-080': 'rgba(199, 185, 148, 0.8)',
      'accent-secondary-090': 'rgba(199, 185, 148, 0.9)',
      'accent-secondary-100': 'rgba(199, 185, 148, 1.0)'
    }}
  />
  <ColorItem
    title="Text"
    subtitle="Primary | Secondary | Tertiary"
    colors={{
      'text-primary': '#202020',
      'text-secondary': '#9A9A9A',
      'text-tertiary': '#6C6C6C'
    }}
  />
  <ColorItem
    title="Background"
    subtitle="Primary | Secondary | Tertiary"
    colors={{
      'background-primary': '#FFFFFF',
      'foreground-primary': '#F3F3F3',
      'foreground-secondary': '#E9E9E9',
      'foreground-tertiary': '#D0D0D0'
    }}
  />
  <ColorItem
    title="Neutrals"
    subtitle="050 | 100 | 200"
    colors={{
      'neutrals-050': '#F6F6F6',
      'neutrals-100': '#F3F3F3',
      'neutrals-200': '#E9E9E9'
    }}
  />
  <ColorItem
    title="Neutrals"
    subtitle="300 | 400 | 500"
    colors={{
      'neutrals-300': '#D0D0D0',
      'neutrals-400': '#BBB',
      'neutrals-500': '#9A9A9A'
    }}
  />
  <ColorItem
    title="Borders"
    subtitle="Primary | Secondary"
    colors={{
      'border-primary': '#E9E9E9',
      'border-secondary': '#D0D0D0'
    }}
  />
  <ColorItem
    title="Semantic Success"
    subtitle="010 | 080 | 100"
    colors={{
      'semantic-success-010': 'rgba(48, 164, 107, 0.1)',
      'semantic-success-080': 'rgba(48, 164, 107, 0.8)',
      'semantic-success-100': 'rgba(48, 164, 107, 1.0)'
    }}
  />
  <ColorItem
    title="Semantic Error"
    subtitle="010 | 080 | 100"
    colors={{
      'semantic-error-010': 'rgba(223, 74, 52, 0.1)',
      'semantic-error-080': 'rgba(223, 74, 52, 0.8)',
      'semantic-error-100': 'rgba(223, 74, 52, 1.0)'
    }}
  />
  <ColorItem
    title="Semantic Warning"
    subtitle="010 | 080 | 100"
    colors={{
      'semantic-warning-010': 'rgba(243, 161, 63, 0.1)',
      'semantic-warning-080': 'rgba(243, 161, 63, 0.8)',
      'semantic-warning-100': 'rgba(243, 161, 63, 1.0)'
    }}
  />
  <ColorItem
    title="Product Colors"
    subtitle="WalletKit | AppKit | Cloud"
    colors={{
      'product-walletkit': '#FFB800',
      'product-appkit': '#FF573B',
      'product-cloud': '#0988F0'
    }}
  />
  <ColorItem
    title="Base Colors"
    subtitle="Black | White | White010"
    colors={{
      black: '#202020',
      white: '#FFFFFF',
      'white-010': 'rgba(255, 255, 255, 0.1)'
    }}
  />
</ColorPalette>
